
/*
class的用法：
================
field-panel  用于nice validator 捕捉

suit 模仿django-suit的样式，例如有线条
plain 普通模式，没有线条

msg-bottom  nice validator的位置在下面，默认在右侧

*/
.error{
  color: red;
}

@mixin horizontal {
  margin-left: auto; margin-right: auto;
}

.field_input{
  position: relative;
}

.field-panel {
  &.no-label {
    label {
      display: none;
    }
  }
}

.field_input{
  input{
    width: 23rem;
  }

  flex-grow:0;
  align-self:center;
  padding:5px 20px;

  /*.ckeditor{*/
  /*padding: 20px;*/
  /*}*/
  .multi-chosen{
    width: 30em;
  }

  // .field_input.input是23rem，element.date组件写死了input外层div只有220px宽度，比input的小很多。造成nicevalidator的错误消息显示在input内部。
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: auto !important;
  }
}

.field-panel.suit{
  background-color: #F5F5F5;
  //max-width:80%;
  margin: auto;
  padding: 20px 30px;
  //border-radius:6px;
  position: relative;
  border: 1px solid #D9D9D9;
  min-width: 600px;
  //overflow: auto;

  &:after{
    content:'';
    display:block;
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:210px;
    border-radius:6px;
    background-color: #fff;
    z-index:0;
  }

  .form-group.field{
    display: flex;
    align-items:stretch;
    margin-bottom: 0;

    .help-text{
      padding: 13px 3px;
      color: #999;
      font-style: italic;
      font-size: 0.9em;
    }

    .label-content{
      word-break: break-all;
    }


    &:first-child .control-label{
        border-top: 5px solid #FFF;
    }
    .control-label{
        width:180px;
        text-align: right;
        padding:5px 30px 5px 0;
        z-index:100;
        flex-shrink:0;
        border-top: 1px solid #EEE;
        padding-top: 10px;
    }
  }


}

.field-panel.plain{
  background-color: white;
  margin: auto;
  padding: 20px 30px;
  position: relative;

  .form-group.field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }
    .field_input {
      flex-grow: 0;
      padding: 5px 10px;
      width: 20em;
    }
  .control-label{
    //width:150px;
    min-width: 8em;
    text-align: right;
    padding:5px 10px;
    padding-top: 8px;
    flex-shrink:0;
    font-weight:400;
  }

}

/*.field-panel {*/
    /*.msg-box.n-right{*/
        /*position: absolute;*/
        /*left: 100%;*/
        /*transform:translate(40px,-10px);*/
        /*top:50%;*/
    /*}*/
    /*.has-help{*/
        /*.msg-box.n-right{*/
            /*position: absolute;*/
            /*left: -50px;*/
            /*transform:translate(40px,10px);*/
       /*}*/
    /*}*/
/*}*/

.field_input:not(.has-help){
      .msg-box.n-right{
        position: absolute;
        left: 100%;
        transform:translate(40px,-10px);
        top:50%;
     }
}
.field_input.has-help{
      .msg-box.n-right{
          position: absolute;
          left: 0;
          bottom:0;
     }
}

/*.field-panel.msg-bottom{*/
    /*.msg-box.n-right{*/
      /*position: absolute;*/
      /*left: 3px;*/
      /*bottom: 0;*/
      /*transform:translate(0,12px);*/
    /*}*/
/*}*/


.field_input{
  position: relative;
}


._tow-col-sel select{
  min-height: 7em;
}

img.img-uploador{
  max-width: 100px;
  max-height: 100px;
}

.req_star{
  color: red;
  position: absolute;
}